<template>
  <div class="schedule-entry">
    <viEdit ref="edit" @reload="request" />
    <div class="layout">
      <div class="head">
        <div class="head-left">
          <el-select
            size="small"
            @change="request"
            v-model="projectId"
            placeholder="请选择项目"
            filterable
          >
            <el-option
              v-for="item in projectList"
              :key="item.deptId"
              :label="item.deptCodedeptName"
              :value="JSON.stringify(item)"
            >
              {{ item.deptName }}
            </el-option>
          </el-select>
          <el-select
            size="small"
            v-model="year"
            placeholder="请选择年份"
            clearable
            filterable
            @change="request"
          >
            <el-option
              v-for="item in yearList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            size="small"
            v-model="month"
            placeholder="请选择月份"
            clearable
            filterable
            @change="request"
          >
            <el-option
              v-for="item in monthList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="main">
        <el-table :data="tableData" stripe height="100%" style="width: 100%">
          <el-table-column prop="speedYear" label="年份"> </el-table-column>
          <el-table-column prop="speedMonth" label="月份"> </el-table-column>
          <el-table-column prop="speedName" label="节点"> </el-table-column>
          <el-table-column prop="speedSubmitDate" label="提交日期">
          </el-table-column>
          <el-table-column prop="speedAgreeDate" label="通过日期">
          </el-table-column>
          <el-table-column prop="speedAmount" label="金额(元)">
            <template #default="scope">
              {{ filterspeedAmount(scope.row.speedAmount) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                @click="$refs.edit.open(scope.row)"
                type="primary"
                plain
                size="mini"
                >修改</el-button
              >
              <el-button
                v-show="computedDeleItem(scope.row)"
                @click="deleItem(scope.row)"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import viEdit from "./components/edit";

import request from "@/utils/request";
import Qs from "qs";
export default {
  name: "schedule-entry",
  components: {
    viEdit,
  },
  data() {
    return {
      projectId: "",
      projectList: [],
      year: "",
      yearList: [],
      month: "",
      monthList: [],
      tableData: [],
    };
  },
  async created() {
    this.initYearList();
    this.initMonthList();
    await this.getprojectList();
    this.request();
  },
  methods: {
    computedDeleItem(msg) {
      let flag = false;
      if (msg.speedSubmitDate || msg.speedAgreeDate || msg.speedAmount) {
        flag = true;
      }
      return flag;
    },
    deleItem(msg) {
      this.$confirm("此操作将删除记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request({
            url: "/system/input/remove",
            method: "post",
            headers: { "content-type": "application/x-www-form-urlencoded" },
            data: Qs.stringify({
              speedId: msg.speedId,
            }),
          }).then((res) => {
            this.request();
            
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            console.log(res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    filterspeedAmount(msg) {
      if (msg) {
        return Number(msg).toFixed(2);
      } else {
        return "--";
      }
    },
    initYearList() {
      let yearList = [];
      for (let i = 0; i < 20; i++) {
        yearList.push({
          id: 2015 + i,
          name: `${2015 + i}年`,
        });
      }
      this.yearList = yearList;
      const time = new Date();
      this.month = time.getMonth() + 1;
      this.year = time.getFullYear();
    },
    initMonthList() {
      let monthList = [];
      for (let i = 0; i < 12; i++) {
        monthList.push({
          id: i + 1,
          name: `${i + 1}月`,
        });
      }
      this.monthList = monthList;
    },
    getprojectList() {
      return new Promise((resolve, reject) => {
        request({
          url: "/system/flow/projectList",
          method: "post",
          headers: { "content-type": "application/x-www-form-urlencoded" },
          data: Qs.stringify({
            // projectId:'',
            // strDate:'',
          }),
        }).then((res) => {
          let projectList = [];
          if (res.data && res.data.length > 0) {
            projectList = res.data.map((item) => {
              item.deptCodedeptName = item.deptCode + item.deptName;
              return item;
            });
          }

          console.log(res);
          this.projectId = JSON.stringify(projectList[0]) || "{}";
          this.projectList = projectList;
          resolve(res);
        });
      });
    },
    request() {
      const dept = JSON.parse(this.projectId);
      request({
        url: "/system/input/list",
        method: "post",
        // headers: { "content-type": "application/x-www-form-urlencoded" },
        data: {
          speedYear: this.year,
          speedMonth: this.month,
          deptId: dept.deptId,
          deptName: dept.deptName,
        },
      }).then((res) => {
        this.tableData = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.schedule-entry {
  width: 100%;
  height: calc(100vh - 85px);
  background: rgba(245, 246, 248, 1);
  padding: 10px;

  .layout {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px;

    .head {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      &-left {
        .el-select {
          margin-right: 20px;
        }
      }
    }

    .main {
      width: 100%;
      height: calc(100% - 60px);
      padding: 10px;
    }
  }
}
</style>
